<i-form
    :model="this.data"
    class="app-form"
    ref="form"
    id="case_main"
    style=""
    @on-validate="formItemValidate.apply(_self, arguments)"
>
    <input style="display:none;">
    <row>
    <tabs
        :animated="false"
        size="small"
        name="main"
        :value="detailsModel.form.activiedPage" 
        @on-click="detailsModel.form.clickPage($event)"
    >
        <tab-pane
            v-show="detailsModel.formpage1.visible"
            name="formpage1"
            :index="0"
            tab="main"
            class=""  
            :label="(h) =>{
                return h('span',{
                    class:'caption'
                },[
                $t('entities.case.main_form.details.formpage1')
                ])
            }"
        >
                <i-col
    class="form-layout-container"
    v-show="detailsModel.group1.visible"
    :style="{}"
    
    
    :lg="{ span: 24, offset: 0 }"
    
>
    <app-form-group
    :model="detailsModel.group1"
    layoutType="TABLE_24COL"
    titleStyle=""
    class=""
    :uiActionGroup="detailsModel.group1.uiActionGroup"
    @groupuiactionclick="groupUIActionClick($event)"
    :caption="$t('entities.case.main_form.details.group1')"
    :isShowCaption="true"
    uiStyle="DEFAULT"
    :titleBarCloseMode="0"
    :isInfoGroupMode="false"

>    
    <app-form-group-data-panel
        slot="dataInfoPanel"
        :model="detailsModel.group1"
        :data="data"
        :context="context"
        :viewparams="viewparams"
    ></app-form-group-data-panel>
    <row>
        <i-col
    class="form-layout-container"
    v-show="detailsModel.title.visible"
    :style="{}"
    
    
    :lg="{ span: 24, offset: 0 }"
    
>
    <app-form-item
    name="title"
    :itemRules="this.rules().title"
    class=""

    :caption="$t('entities.case.main_form.details.title')"
    uiStyle="DEFAULT"
    :labelWidth="130"
    :isShowCaption="true"
    :error="detailsModel.title.error"
    :isEmptyCaption="false"
    labelPos="LEFT"
>
    <app-color-picker
    v-model="data.title"  
    @enter="onEnter($event)"
    :data="data"
    :disabled="detailsModel.title.disabled"
    :formState="formState"
    color="color"
    style=""
    @colorChange="(val) => {onFormItemValueChange(val)}">
</app-color-picker>

</app-form-item>

</i-col>
    
    </row>
</app-form-group>

</i-col>


        </tab-pane> 
        <tab-pane
            v-show="detailsModel.formpage2.visible"
            name="formpage2"
            :index="1"
            tab="main"
            class=""  
            :label="(h) =>{
                return h('span',{
                    class:'caption'
                },[
                $t('entities.case.main_form.details.formpage2')
                ])
            }"
        >
                <i-col
    class="form-layout-container"
    v-show="detailsModel.group2.visible"
    :style="{}"
    
    
    :lg="{ span: 24, offset: 0 }"
    
>
    <app-form-group
    :model="detailsModel.group2"
    layoutType="TABLE_24COL"
    titleStyle=""
    class=""
    :uiActionGroup="detailsModel.group2.uiActionGroup"
    @groupuiactionclick="groupUIActionClick($event)"
    :caption="$t('entities.case.main_form.details.group2')"
    :isShowCaption="true"
    uiStyle="DEFAULT"
    :titleBarCloseMode="0"
    :isInfoGroupMode="false"

>    
    <app-form-group-data-panel
        slot="dataInfoPanel"
        :model="detailsModel.group2"
        :data="data"
        :context="context"
        :viewparams="viewparams"
    ></app-form-group-data-panel>
    <row>
            
    </row>
</app-form-group>

</i-col>


        </tab-pane> 
    </tabs>
    </row>
</i-form>
